<template>
	<view class="sub-steps">
		<view class="sub-steps-title">
			审核过程
		</view>
		<view class="step-item" v-for="(item,i) in nodeList" :key="i">
			<view class="node-info">
				<uni-icons type="smallcircle-filled" color="#07C25B" :size="10"></uni-icons>
				<text class="node-info-title">{{item.title}}</text>
			</view>
			<view class="step-time" :class="i < nodeList.length-1 ? 'step-line' : ''">
				<text>2024-01-01 14:00</text>
				<text class="step-status">已审批</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Stepsbox",
		data() {
			return {
				nodeList:[{
					title: '农业农村主管部门',
					desc: '2018-11-11'
				}, {
					title: '林业主管部门',
					desc: '2018-11-12'
				}, {
					title: '乡镇',
					desc: '2018-11-13'
				}]
			};
		}
	}
</script>

<style lang="scss">
	.sub-steps{
		background-color: #F2F3F5;
		border-radius: 8rpx;
		padding: 26rpx 16rpx 10rpx 16rpx;
		margin-top: 32rpx;
	}
		
	.sub-steps-title{
		font-weight: 500;
		font-size: 31rpx;
		color: #000000;
		margin-bottom: 34rpx;
	}
	.node-info{
		display: flex;
		align-items: center;
	}
	.node-info-title{
		font-size: 29rpx;
		color: #333333;
		line-height: 22rpx;
		margin-left: 35rpx;
	}
	.step-line{
		border-left: solid 3rpx #00B578;
		
	}
	.step-time{
		font-weight: 400;
		font-size: 28rpx;
		color: #888888;
		line-height: 22rpx;
		padding-top: 25rpx;
		padding-left: 48rpx;
		padding-bottom: 20rpx;
		margin-left: 10rpx;
		margin-bottom: 2rpx;
		display: flex;
		justify-content: space-between;
	}
	.step-status{
		font-size: 28rpx;
		color: #00B578;
	}
</style>